<template>
	<view class="page">
		<view class="box-class d_flex j_b" v-if="bookData">
			<view class="book">
				<image v-if="bookData.imgUrl" :src="bookData.imgUrl" mode=""></image>
				<image v-else src="/static/b1.png" mode=""></image>
			</view>
			<view class="info">
				<view class="row d_flex j_b items-center">
					<view class="name">{{bookData.name}}</view>
					<view class="ku flex-shrink-0 pl-20" @click="reset"><image src="/static/reset.png" mode=""></image>重置</view>
				</view>
				<view class="pro">
					<u-line-progress  :percentage="parseInt((bookData.graspTotal*100)/bookData.total)" :height="12" activeColor="#5480F8" inactiveColor="#F2F3F8" :showText="false" ></u-line-progress>
				</view>
				<view class="status d_flex_b">
					<view class="item">
						<text class="label">已学</text><text style="margin-left: 10rpx;" class="num">{{bookData.graspTotal||0}}</text>
					</view>
					<view class="item">
						<text class="label">总词数  {{bookData.total||0}}</text>
					</view>
				</view>
			</view>
		</view>
		<view class="list" v-if="list.length>0">
			<view class="item d_flex_b" v-for="(item,i) in list" :key="i" @click="toList(item)">
				<view class="word">{{item.name}}</view>
				<view class="mean"><text>{{item.graspTotal||0}}</text>/{{item.total||0}}</view>
			</view>
		</view>
		<view class="no-data" v-else>
			<u-empty mode="list" text="暂无数据" icon="http://cdn.uviewui.com/uview/empty/list.png"></u-empty>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				navList:[
					{name:'未学习',num:0},
					{name:'错词',num:0},
					{name:'已掌握',num:0},
				],
				curNav:0,
				list:[],
				id:'',
				bookData:'',
			};
		},
		onLoad(e) {
			this.bookData=uni.getStorageSync('curBookData');
			this.navList[0].num=this.bookData.notGraspTotal
			this.navList[1].num=this.bookData.errorTotal
			this.navList[2].num=this.bookData.graspTotal
			this.id=e.id;
			this.getList();
		},
		methods:{
			getList(){
				this.$http.get1('/api/client/word/listWordGroupInfo',{bookId:this.id}).then(res=>{
					if(res.code==200){
						this.list=res.data;
					}
				})
			},
			toStudy(item){
				uni.navigateTo({
					url:'/pages/remember/remember?gid='+item.groupId+'&id='+this.id+'&isGroup=1&tit='+this.bookData.name
				})
			},
			toList(item){
				uni.navigateTo({
					url:'/pages/book/book?id='+this.id+'&gid='+item.groupId
				})
			},
      async confirm() {
        return new Promise(function (resolve, reject) {
          uni.showModal({
            title: `确认重置吗`,
            confirmText: '确认',
            success({confirm, cancel}) {
              if (confirm) {
                resolve()
              }
              if (cancel) {
                reject()
              }
            }
          })
        })
      },
			async reset(){
        await this.confirm()
				this.$http.get1('/api/client/word/clearGraspWordBookData',{
					bookId:this.id
				}).then(res=>{
					if(res.code==200){
						uni.showToast({
							title: '操作成功'
						});
						this.bookData.graspTotal=0;
						this.getList();
					}else{
						uni.showToast({
							title: res.message,
							icon:'none'
						});
					}
				})
			}
		}
	}
</script>

<style lang="scss">
page{
	background-color: #F2F3F8;
}
.page{
	
}

.box-class{
	background-color: #fff;
	width:686rpx;
	margin: 20rpx auto 1rpx;
	padding:40rpx 30rpx;
	border-radius: 20rpx;
	box-sizing: border-box;
	box-shadow: 0rpx 4rpx 8rpx 2rpx rgba(42,65,152,0.05);
	.book{
		width: 120rpx;
		height: 148rpx;
		margin-right: 20rpx;
		image{
			width: 120rpx;
			height: 148rpx;
		}
	}
	.info{
		flex: 1;
		.row{
			margin-bottom: 30rpx;
			.name{
				font-size: 28rpx;
				font-weight: bold;
				color: #333333;
				flex: 1;
				width: 300rpx;
			}
			.ku{
				font-size: 24rpx;
				color: #BBBFCC;
				image{
					width: 20rpx;
					height: 20rpx;
					margin-right: 8rpx;
				}
			}
		}
		.pro{
			margin-bottom: 20rpx;
		}
		.status{
			
			.item{
				.label{
					font-size: 22rpx;
					color: #BBBFCC;
				}
				.num{
					color: $theme;
					font-size: 22rpx;
					margin: 0 4rpx;
				}
			}
		}
	}
}
.list{
	width: 686rpx;
	margin: 20rpx auto;
	padding: 30rpx;
	box-sizing: border-box;
	background: #FFFFFF;
	box-shadow: 0rpx 4rpx 8rpx 2rpx rgba(42,65,152,0.05);
	border-radius: 20rpx ;
	.item{
		width: 100%;
		height: 120rpx;
		padding: 0 30rpx;
		box-sizing: border-box;
		border-bottom: 1rpx solid #E4E5EC;
		&:last-child{
			border: none;
		}
		.word{
			width: 300rpx;
			font-size: 28rpx;
			color: #333333;
		}
		.mean{
			flex: 1;
			width: 350rpx;
			margin-left: 10rpx;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
			font-size: 24rpx;
			color: #BBBFCC;
			text-align: right;
			text{
				color: #5480F8;
			}
		}
	}
}
</style>
